﻿@model TonyBlogs.DTO.BlogArticle.BlogArticleSearchDTO

@section css{
    <style type="text/css">
        [v-cloak] {
            display: none;
        }
    </style>
}

<!-- BEGIN SIDEBAR & CONTENT -->
<div class="row margin-bottom-40 v-cloak" id="app">
    <!-- BEGIN CONTENT -->
    <div class="col-md-12 col-sm-12">
        <div class="content-page">
            <div class="row">
                <!-- BEGIN LEFT SIDEBAR -->
                <div class="col-md-9 col-sm-9 blog-posts">
                    <blogitem v-for="(blogitem, index) in BlogList"
                              v-bind:blog="blogitem"
                              v-bind:index="index"></blogitem>
                    <paginate v-bind:page-count="PageCount"
                              v-bind:click-handler="JumpPage"
                              v-bind:prev-text="'上一页'"
                              v-bind:next-text="'下一页'"
                              v-bind:container-class="'pagination'">
                    </paginate>
                </div>
                <!-- END LEFT SIDEBAR -->
                <!-- BEGIN RIGHT SIDEBAR -->
                <div class="col-md-3 col-sm-3 blog-sidebar">
                    <!-- CATEGORIES START -->
                    <h3 class="no-top-space">分类</h3>
                    <ul class="nav sidebar-categories margin-bottom-40">
                        <li><a href="/blog">博客</a></li>
                        <li><a href="/essay">随笔</a></li>
                    </ul>
                    <!-- CATEGORIES END -->
                    <!-- BEGIN BLOGVIEW -->
                    <blogview v-bind:userid="0"></blogview>
                    <!-- END BLOGVIEW -->
                </div>
                <!-- END RIGHT SIDEBAR -->
            </div>
        </div>
    </div>
    <!-- END CONTENT -->
</div>
<!-- END SIDEBAR & CONTENT -->

<script type="text/x-template" id="blogitem-template">
    <div>
        <div class="row">
            <div class="col-md-12 col-sm-12">
                <h4><b><a v-bind:href="DetailUrl">{{blog.Title}}</a></b></h4>
                <ul class="blog-info">
                    <li><i class="fa fa-calendar"></i> {{blog.CreateTime}}</li>
                    <li><i class="fa fa-eye"></i> {{blog.Traffic}}</li>
                    <li v-if="HasComments"><i class="fa fa-comments"></i> {{blog.CommentNum}}</li>
                    <li><i class="fa fa-tags"></i> {{blog.Category}}</li>
                </ul>
                <p>{{blog.Summary}}</p>
                <a v-bind:href="DetailUrl" class="more">阅读更多 <i class="icon-angle-right"></i></a>
            </div>
        </div>
        <hr class="blog-post-sep">
    </div>    
</script>


@section scripts{
<script src="~/Content/assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="~/Content/assets/global/plugins/vue-2.1.7.min.js"></script>
<script src="~/Content/assets/global/plugins/vue-plugin/vuejs-paginate.js"></script>
<script src="~/Content/js/blog.view.rank.js"></script>

<script type="text/javascript">


    var data = {
        SearchDTO: {
            PageIndex: 1,
            PageSize: 10,
            Category: '@Model.Category',
        },
        BlogList: [],
        ViewRankList:[],
        PageCount: 1,
    };

    var actions = {
        list: '@Url.Action("AjaxGetPageList", "Home")',
        viewrank: '@Url.Action("AjaxGetViewRankList", "Home")',
        detail: '/b/',
    }

    var paramMethods = {
        JumpPage: function (pageIndex) {
            data.SearchDTO.PageIndex = pageIndex;
            this.GetList();
            Metronic.scrollTo($("#app"));
        },

        GetList: function () {
            Metronic.blockUI({
                animate: true
            });

            $.ajax({
                url: actions.list,
                data: data.SearchDTO,
                type: "POST",
                dataType: "json",
                success: function (retData) {
                    Metronic.unblockUI();
                    data.BlogList = retData.List;
                    data.PageCount = retData.TotalRecords / retData.PageSize;
                },
                error: function (retData) {
                    Metronic.unblockUI();
                    Metronic.simpleAlert("发生错误，请重试！");
                }
            });
        },

        GetViewRankList: function () {
            $.ajax({
                url: actions.viewrank,
                type: "GET",
                dataType: "json",
                success: function (retData) {
                    data.ViewRankList = retData;
                },
                error: function (retData) {
                    Metronic.simpleAlert("发生错误，请重试！");
                }
            })
        },

        JumpDetail: function (blogID) {
            window.open(actions.detail + blogID);
        },
    };

    var blogitemTemplates = {
        props: ['blog', 'index'],
        template: '#blogitem-template',
        computed: {
            DetailUrl: function () {
                return actions.detail + this.blog.ID;
            },

            HasComments: function () {
                return this.blog.CommentNum > 0;
            },

            IsLastItem: function () {
                return this.index == (data.BlogList.length - 1);
            }
        }
    };

   

    Vue.component('blogitem', blogitemTemplates);
    Vue.component('paginate', VuejsPaginate)

    var vueObj = new Vue({
        el: "#app",
        data: data,
        methods: paramMethods,
        mounted: function () {
            this.GetList();
        },
    });

</script>
}
